<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <meta charset="utf-8">
    <link href="css/friendList.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/vue.js"></script>

</head>

<body>
<div class="top">
    <p style="margin-left: 1%; float:left; width: 20%; line-height: 60px;text-align: center; overflow: hidden;height: 60px;"></p>
    <p style="margin-left: 5%;margin-right: 5%; float:left; width: 50%; line-height: 60px; text-align: center">客服(99+)</p>
    <p style="margin-right: 1%; float:right; width:15%;  line-height: 60px;text-align: center">+</p>
    <div style="clear: both"></div>
</div>
<div class="mid">
    <div class="mid-body">
        <ul style="padding: 0" id="chatList">
            <li v-for="data in List">
               <div v-if="data.id == '1'" class="user-li">
                   <div class="user-info">
                       <div>
                           <img :src="data.img" alt="" class="user-img">
                       </div>
                       <div>
                           <p class="user-name">{{data.name}}</p>
                       </div>
                   </div>
               </div>
                <p class="first-name" v-if="data.id == '0'">{{data.word}}</p>
            </li>
        </ul>
    </div>
</div>
<div class="foot">
    <div class="foot-body">
        <div class="foot-box">
            <p>客服(10)</p>
        </div>

        <div class="foot-box">
            <p>我的好友</p>
        </div>

        <div class="foot-box">
            <p>个人中心</p>
        </div>
    </div>
</div>

<script>
    var chatList = new Vue({
        el: '#chatList',
        data : {
            List : {
              0:  {id: 1, name: '添加朋友', img:"images/face.jpg"},
              1:  {id: 1, name: '群聊', img:"images/face.jpg"},
              D:  {id:0, word:'A'},
              E:  {id:0, word:'B'},
              S:  {id:0, word:'C'}
            }
        }
    });

</script>
</body>
</html>